<template>
  <el-card>
    <el-form-item label="属性名">
      <el-input
        placeholder="请输入属性名"
        class="add-input"
        v-model="keyName"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        :icon="Plus"
        @click="addAttrList"
        :disabled="!keyName"
      >
        添加属性值</el-button
      >
      <el-button @click="emit('toggle', false)">取消</el-button>
    </el-form-item>
    <el-table :data="data" stripe style="width: 100%">
      <el-table-column prop="date" label="序号" width="70" type="index" />
      <el-table-column prop="name" label="属性值名称" width="800">
        <template v-slot="{ row }">
          <el-input
            v-if="row.isEdit"
            size="small"
            ref="attrDom"
            v-model="row.value"
            @blur="editCancle(row)"
          />
          <div v-else @click="editIn(row)" style="height: 20px">
            {{ " " + row.value }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot="$index">
          <el-popconfirm
            title="Are you sure to delete this?"
            @confirm="deleteTmName($index)"
          >
            <template #reference>
              <el-button type="danger" size="small">
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" @click="save" :disabled="isBtnDis">
        {{ addOrEdit }}</el-button
      >
      <el-button @click="emit('toggle', false)">取消</el-button>
    </el-form-item>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XAddAttr",
};
</script>

<script lang="ts" setup>
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, computed, nextTick, onMounted } from "vue";
import { reqAddAttr } from "@/api/product/attr";
import type { addAttr } from "@/api/product/model/index";
import { useAttrStroe } from "@/stores/attr";
// attrName: "魂玉"
// attrValueList: Array(1)
// 0: {id: 6015, valueName: '七星夺窍', attrId: 2298}
// length: 1
// [[Prototype]]: Array(0)
// categoryId: 6
// categoryLevel: 3
// id: 2298
const store = useAttrStroe();
const attrDom = ref();
const keyName = ref();
const data = ref<any>([]);
const prop = defineProps<{ id3: number | undefined }>();
const emit = defineEmits(["toggle"]);
onMounted(() => {
  if (!store.$state.isEditItem) return;
  keyName.value = store.$state.attrRow.attrName;

  var dataArr = store.$state.attrRow.attrValueList.map((item) => {
    return { value: item.valueName, isEdit: false };
  });
  data.value = dataArr;
});
const isBtnDis = computed(() => {
  return !(
    keyName.value &&
    data.value.some((item: any) => {
      return item.value;
    })
  );
});
const addOrEdit = computed(() => {
  return store.$state.isEditItem ? "保存修改" : "保存添加";
});
function addAttrList() {
  data.value.push({ value: "", isEdit: true });
  focus();
}
function focus() {
  nextTick(() => {
    setTimeout(() => {
      attrDom.value.focus();
    });
  });
}
async function save() {
  var arr = data.value.map((item: any) => {
    return { attrId: undefined, valueName: item.value };
  });
  if (store.$state.attrRow.id) {
    var obj: addAttr = {
      attrName: keyName.value,
      attrValueList: arr,
      categoryId: prop.id3 as number,
      categoryLevel: 3,
      id: store.$state.attrRow.id,
    };
  } else {
    var obj: addAttr = {
      attrName: keyName.value,
      attrValueList: arr,
      categoryId: prop.id3 as number,
      categoryLevel: 3,
    };
  }
  await reqAddAttr(obj);
  !obj.id && ElMessage.success("添加品牌属性成功");
  obj.id && ElMessage.success("修改品牌属性成功");
  store.$state.attrRow = {} as any;
  emit("toggle", false);
}
function editCancle(row: any) {
  row.isEdit = false;
}
function editIn(row: any) {
  row.isEdit = true;
  focus();
}
function deleteTmName(index: number) {
  data.value.splice(index, 1);
}
</script>

<style scoped>
.add-input {
  width: 200px;
}
</style>
